<template>
	<view class="videoAll">
		<view v-if="list.length == 0" class="none">
			<i class="iconfont iconwujilu"></i>
			<text>暂无数据</text>
		</view>
		<view class="cont">
			<view class="wf-page">
				<!-- left-->
				<view>
					<view id="left" v-if="leftList.length">
						<view v-for="(item,index) in leftList" :key="index" class="wf-item" @tap="itemTap(item)">
							<WaterfallsFlowItem :item="item" @person="person" @giveUp="giveUp" />
						</view>
					</view>
				</view>
				<!--    right    -->
				<view>
					<view id="right" v-if="rightList.length">
						<view v-for="(item,index) in rightList" :key="index" class="wf-item" @tap="itemTap(item)">
							<WaterfallsFlowItem :item="item" @person="person" @giveUp="giveUp" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more v-if="list.length >= 5" :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import WaterfallsFlowItem from './WaterfallsFlowItem.vue'
	export default {
		components: {
			uniLoadMore,
			WaterfallsFlowItem
		},
		data() {
			return {
				defimg: this.defimg,
				allList: [], // 全部列表
				leftList: [], // 左边列表
				rightList: [], // 右边列表
				mark: 0, // 列表标记
				boxHeight: [], // 下标0和1分别为左列和右列高度
			}
		},
		props: {
			school_id: {
				type: Number,
				default: 0
			},
			list: Array,
			status: String,
			contentText: Object,
			type: String,
			pagesize: Number
		},
		watch: {
			async list() {
				if (this.list.length === 0 || (this.list.length === this.updateNum && this.list.length <= this.allList.length)) {
					this.allList = [];
					this.leftList = [];
					this.rightList = [];
					this.boxHeight = [];
					this.mark = 0;
				}
				if (this.list.length) {
					this.allList = this.list;
					this.allList.forEach((item, key) => {
						this.allList[key]['key'] = key;
					})
					await this.waterFall()
				}
			},
			async mark() {
				const len = this.allList.length;
				if (this.mark < len && this.mark !== 0) {
					await this.waterFall();
				}
			}
		},
		methods: {
			async waterFall() {
				const i = this.mark;
				if (i === 0) {
					this.leftList.push(this.allList[i]);
					await this.getViewHeight(0);
				} else if (i === 1) {
					this.rightList.push(this.allList[i]);
					await this.getViewHeight(1);
				} else {
					const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
					if (leftOrRight) {
						this.rightList.push(this.allList[i])
					} else {
						this.leftList.push(this.allList[i])
					}
					await this.getViewHeight(leftOrRight);
				}
			},
			async getViewHeight(leftOrRight) {
				const query = uni.createSelectorQuery().in(this);
				const id = leftOrRight ? '#right' : '#left';
				await setTimeout(() => {
					query.select(id).boundingClientRect(res => {
						this.boxHeight[leftOrRight] = res.height;
						this.mark = this.mark + 1;
					}).exec();
				}, 50)
			},
			itemTap(item) {
				let url = ''
				if (this.school_id > 0) {
					url = '../../pages/topic/videoDetail?index= ' + item['key'] + '&pagesize=1&type=1&users_type=1' + '&school_id=' +
						this.school_id
				} else {
					url = '../../pages/topic/videoDetail?index=' + item['key'] + '&pagesize=' + this.pagesize + '&type=1&users_type=1'
				}
				uni.navigateTo({
					url: url
				})
			},
			/* 点赞 & 取消点赞 */
			giveUp(data) {
				let video_id = data['video_id'];
				let is_like = data['is_like'];
				let index = data['index'];
				var state = 0;
				if (is_like == 2) {
					state = 1;
				} else {
					state = 2;
				}
				var data = {
					video_id: video_id,
					is_like: state
				}
				this.$api.apiPost('user/video.Lists/isLike', data).then(res => {
					if (res.data.code == 200) {
						if (is_like == 2) {
							this.list[index].is_like = 0;
							this.list[index].likenum--;
						} else {
							this.list[index].is_like = 2;
							this.list[index].likenum++;
						}
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			/* 跳转个人主页 */
			person(data) {
				let user_id = data.user_id;

				var myId = uni.getStorageSync('userInfo').id;
				if (myId == user_id) {
					uni.navigateTo({
						url: '/pages/school/my-center'
					})
				} else {
					uni.navigateTo({
						url: '/pages/school/my-center?user_id=' + user_id
					})
				}
			}
		}
	}
</script>

<style>
	.videoAll {
		width: 100%;
		padding: 0 30upx 30upx 30upx !important;
		width: calc(100% - 60upx);
	}

	.none {
		color: #999999;
		text-align: center;
	}

	.none .iconwujilu {
		color: #E5E5E5;
		font-size: 306upx;
		line-height: 1;
		display: block;
	}

	.none text {
		color: #E5E5E5;
		font-size: 46upx;
		display: block;
	}

	.cont {
		display: flex;
		justify-content: space-between;
		flex-flow: wrap;
		padding-top: 20upx;
	}

	.contItem {
		position: relative;
		width: 48%;
		height: 460upx;
		margin: 10upx 0;
		border-radius: 8upx;
		background-size: cover !important;
	}

	.contItem image {
		width: 100%;
		height: 100%;
	}

	.item {
		position: absolute;
		bottom: 0;
		width: calc(100% - 50upx);
		padding: 0 20upx 0 30upx;
		background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
	}

	.title {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #FFFFFF;
	}

	.info {
		background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10upx;
	}

	.info image {
		width: 50upx;
		height: 50upx;
		border-radius: 50%;
	}

	.up {
		color: #FFFFFF;
		display: flex;
		align-items: center;
	}

	.up i {
		font-size: 50upx;
		line-height: 1;
	}

	.zan_active {
		color: #FF4E78 !important;
	}

	.zan_active i {
		color: #FF4E78;
	}
</style>
<style lang="scss" scoped>
	$page-padding:30upx;
	$grid-gap:30upx;

	.wf-page {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: $grid-gap;
		width: 100%;
	}

	.wf-item {
		// width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);
		width: 100%;
		padding-bottom: $grid-gap;
		border-radius: 10upx;
		overflow: hidden;
	}
</style>
